<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 2px solid #000;
				position: relative;
				transition: all 1s ease 0s;
				transform-style: preserve-3d;
			}
			img{
				position: absolute;
				top: 0;
				left: 0;
				transform: translateZ(100px);
			}
			.no2{
				transform: rotateX(90deg) translateZ(100px);
			}
			div:hover{
				transform: rotateX(-90deg);
			}
			div:visited{
				transform: rotateX(-90deg);
				transition: all 1s ease 0s;
				transform-style: preserve-3d;
			}
		</style>
	</head>
	<body>
		<div>
			<img class="no1" src="../img/1.png" alt="1">
			<img class="no2" src="../img/2.png" alt="2">
		</div>
	</body>
</html>
